<template>
  <div class="dialog-container">
    <a-modal
      :visible="visible"
      :title="title"
      :title-align="(titleAlign as 'center' | 'start' | undefined)"
      :width="width"
      :mask-closable="maskClosable"
      :closable="closable"
      :footer="footer"
      :modal-class="modalClass"
      :modal-style="modalStyle"
      :body-style="bodyStyle"
      :hide-cancel="hideCancel"
      :ok-button-props="okButtonProps"
      :esc-to-close="escToClose"
      :ok-text="okText"
      :cancel-text="cancelText"
      :cancel-button-props="cancelBtnType"
      @cancel="handleCancel"
      v-on="{ ok: isForm ? null : handleOk, beforeOk: isForm ? handleBeforeOk : null }"
    >
      <!-- v-on="{ ok: isForm ? null : handleOk, beforeOk: isForm ? handleBeforeOk : null }" -->
      <slot></slot>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  titleAlign: {
    type: String,
    default: "center",
  },
  width: {
    type: Number || String,
    default: 0 || "auto",
  },
  isForm: {
    type: Boolean,
    default: false,
  },
  maskClosable: {
    type: Boolean,
    default: true,
  },
  closable: {
    type: Boolean,
    default: true,
  },
  modalClass: {
    type: String,
    default: "",
  },
  modalStyle: {
    type: Object,
    default: null,
  },
  bodyStyle: {
    type: Object,
    default: null,
  },
  okButtonProps: {
    type: Object,
    defauly: null,
  },
  footer: {
    type: Boolean,
    default: true,
  },
  escToClose: {
    type: Boolean,
    default: true,
  },
  okText: {
    type: String,
    default: "确定",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  cancelBtnType: {
    type: Object,
    default: null,
  },
  hideCancel: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:visible"]);

const handleBeforeOk = (
  done: (closed: boolean) => void
): void | boolean | Promise<void | boolean> => {
  new Promise((resolve, reject) => {
    resolve(
      emit("update:visible", {
        flag: false,
        status: "save",
        done,
      })
    );
  });
  // emit("update:visible", {
  //   flag: false,
  //   status: "save",
  //   done,
  // });
};

const handleOk = (done: (closed: boolean) => void) => {
  emit("update:visible", {
    flag: false,
    status: "save",
    done,
  });
};

const handleCancel = () => {
  emit("update:visible", {
    flag: false,
    status: "clear",
  });
};
</script>
